<template>
  <!-- <div style="height:100%; width:100%">
    <iframe :src="src" style="width:100%; height:100%"></iframe>
  </div> -->

  <div>
    <div id="label-studio">
      <div class="ui loader active inline centered"></div>
    </div>
  
    <h1>Output</h1>
    <div>{{output}}</div>
  </div>

</template>

<script>
import "../../utils/htx-docker-init-v1.0.0"
import "../../utils/main"
import "../../utils/jquery"

export default {
  data() {
    return {
      src: '/static/label-studio.html',
      task_data: `
      {
        "id": 6077,
        "data": {
          "image": "https://app.heartex.ai/static/samples/sample.jpg",
          "text": ""
        },
        "completions": null,
        "predictions": null,
        "project": 1,
        "accuracy": 0,
        "created_at": "2024-03-10T02:46:32.000000Z",
        "updated_at": "2024-03-10T02:46:32.000000Z"
      }
      `,
      output: "{}",
      intervalId: null,
    }
  },

  methods: {
    getResult: function(){
      var completion = Htx.completionStore.selected.serializeCompletion()

      if (completion) {
        if (completion.length > 3000) {
          completion = completion.slice(0, 3000) + ' ...';
        }
        this.output = completion
      }
    }
  },

  mounted() {
    var Htx = new HeartexSDK({
      elid: "label-studio",
      config: `
          <View>
            <!-- Image with Polygons -->
            <View style="padding: 25px; box-shadow: 2px 2px 8px #AAA">
              <Header value="Label the image with polygons"/>
              <Image name="img" value="$image"/>
              <Text name="text1" value="Select label, start to click on image"/>

              <PolygonLabels name="tag" toName="img">
                <Label value="Airbus" background="blue"/>
                <Label value="Boeing" background="red"/>
              </PolygonLabels>
            </View>

          </View>
          `,
      user: { pk: 1, firstName: "Awesome", lastName: "User" },
      project: 1,
      options: { secureMode: false },
      interfaces: [
        "basic",
        "panel", // undo, redo, reset panel
        "side-column", // entity
        ],
    });

    Htx.showTask(
      JSON.parse(this.task_data),
      { addInitial: true, loadCompletionIfExists: true }
    )

    this.intervalId = setInterval(() => {
      this.getResult()
    }, 500); 
  },
}
</script>

<style scoped>
#label-studio div[class^="App_editor"],
div[class*="App_editor"] {
  width: 95% !important;
  min-width: 95% !important;
  max-width: 95% !important;
}

#label-studio .ls-segment {
  top: 0;
}
</style>